<template>
    <view class="cul-wrapper">
        <!--这里减掉的308为操作栏的高度和内边距之和-->
        <scroll-view
            :style="{ height: scrollHeight - 380 + 'px' }"
            scroll-y
            :scroll-into-view="scrollIndex"
            scroll-with-animation
        >
            <block v-for="(msg, index) in msgs" :key="index">
                <view
                    :class="[msg.isme ? 'msg-me' : 'msg-service']"
                    :id="'msg-' + index"
                >
                    <!-- <image class="avatar" v-if="!msg.isme" :src="msg.useravatar" lazy-load></image> -->
                    <image
                        class="avatar"
                        v-if="!msg.isme"
                        src="@/static/images/login_icon_wechat.png"
                        lazy-load
                    ></image>
                    <view class="msg-wrap">
                        <view class="avatar-name">{{ msg.username }}</view>
                        <view class="msg-text">
                            <view class="msg-text-content">
                                <text>{{ msg.msg }}</text>
                            </view>
                        </view>
                    </view>
                    <image
                        class="avatar"
                        v-if="msg.isme"
                        :src="msg.user_avatar"
                        lazy-load
                    ></image>
                </view>
            </block>
        </scroll-view>
        <!-- <view class="operation">
			<view class="shop_block"></view>
			<input type="text" v-model="msgInput.msg1" :placeholder="inputTips" class="msg-input3" :disabled="noTalk" />
			<view @tap="sub2(msgInput.msg1)" class="send_btn">发送</view>
		</view> -->

        <!-- 商场弹窗 -->

        <!-- 打赏弹窗 -->
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: "CulChat",
    props: {
        //聊天窗体高度
        scrollHeight: {
            type: [Number, String],
            default() {
                let height = 0;
                //调用uni-app接口获取屏幕高度
                uni.getSystemInfo({
                    //成功回调函数
                    success(res) {
                        //windoHeight为窗口高度，主要使用的是这个
                        height = res.windowHeight;
                    },
                });
                return height;
            },
        },
        meAvatar: {
            type: String,
        },
        anotherAvatar: {
            type: String,
        },
        anotherMsg: {
            type: Array,
        },
        noTalk: {
            type: Boolean,
            default: false,
        },
        sid: {
            type: [String, Number],
        },
        scrollIndex: {
            type: String,
        },
    },
    data() {
        return {
            //控制按钮和文本框样式和功能的转换
            conversion: true,
            msgInput: {
                msg1: "",
                msg2: "",
            },
            //消息列表
            msgs: [],
            //滚动位置
            // scrollIndex: this.scrollIndex,
            couponShop: false,
            couponMoney: false,
            isDataEmpty: false,
            course_list: [],
            choseId: 0,

            money_list: [1, 2, 5, 10, 20],
            money_num: "",

            inputTips: "向老师提问~",
        };
    },
    computed: {
        ...mapGetters({
            userInfo: "user/getUserInfo",
        }),
    },
    watch: {
        anotherMsg(val) {
            this.init();
        },
        money_num(val) {
            if (val != "") {
                this.choseId = -1;
            }
        },
        noTalk(val) {
            this.inputTips = val == true ? "禁言中" : "向老师提问~";
        },
    },
    methods: {
        init() {
            // this.msgs.push(this.anotherMsg)
            this.msgs = this.anotherMsg;
            this.jumpScroll();
        },
        firstScroll(val) {
            this.$nextTick(function () {
                this.scrollIndex = "msg-" + (val - 1);
            });
        },
        //滚动到指定位置
        jumpScroll() {
            //滚动到指定位置之前首先清空scrollIndex的值，否则只能滚动一次，再次调用就会失效
            this.scrollIndex = "";
            this.$nextTick(function () {
                // this.scrollIndex = 'msg-' + (this.msgs.length - 1)
            });
        },
        sub1(val) {
            if (!this.conversion) {
                this.sub(val);
            }
        },
        sub2(val) {
            this.sub(val);
        },
        sub(val) {
            let _self = this;
            if (val) {
                //清空输入框中的文字
                this.msgInput.msg1 = "";
                this.msgInput.msg2 = "";
                let msg = {
                    isme: true,
                    data: val,
                    user_name: _self.userInfo.nick_name,
                    user_avatar: _self.userInfo.avatar_url,
                };
                this.msgs.push(msg);
                this.conversion = !this.conversion;
                this.jumpScroll();
                this.$emit("submit", {
                    message: val,
                    user_name: _self.userInfo.nick_name,
                    user_avatar: _self.userInfo.avatar_url,
                    callback: (m) => {
                        let anotherMsg = {
                            isme: false,
                            data: m,
                        };
                        _self.msgs.push(anotherMsg);
                        _self.jumpScroll();
                    },
                });
            } else {
                this.conversion = !this.conversion;
                this.jumpScroll();
            }
        },
    },
};
</script>

<style scoped lang="scss">
* {
    box-sizing: border-box;
    overflow: hidden;
}
.cul-wrapper {
    width: 100vw;
    padding: 0 35rpx;
    margin-top: 10px;
    box-sizing: border-box;
    background-color: #f7f7f7;
    overflow: hidden;
}

.msg-me,
.msg-service {
    display: flex;
    align-items: flex-start;
    width: 680rpx;
    margin: 30rpx 0;
    box-sizing: border-box;
    overflow: hidden;
}

.msg-me {
    justify-content: flex-end;
}

.msg-service {
    justify-content: flex-start;
}
.join_room {
    display: table;
    margin: 0 auto;
    color: #909399;
    font-size: 24rpx;
    padding: 11rpx 35rpx;
    border-radius: 27rpx;
    text-align: center;
    background-color: #eeeeee;
}

.avatar {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
}

.msg-text {
    width: 560rpx;
}

.msg-wrap {
    width: 560rpx;
}

.msg-me > .msg-wrap > .avatar-name {
    text-align: right;
    margin-right: 10px;
    font-size: 13rpx;
    color: #909399;
    margin-bottom: 12rpx;
}

.msg-service > .msg-wrap > .avatar-name {
    margin-left: 10px;
    font-size: 13rpx;
    color: #909399;
    margin-bottom: 12rpx;
}

.msg-me > .msg-wrap > .msg-text {
    display: flex;
    justify-content: flex-end;
}

.msg-text-content {
    line-height: 35rpx;
    display: inline-block;
    box-sizing: border-box;
    padding: 15rpx 19rpx;
    font-size: 28rpx;
}

.msg-me > .msg-wrap > .msg-text > .msg-text-content {
    margin-left: 70rpx;
    background-color: #ffffff;
    border: 1rpx solid #d5e0e5;
    border-radius: 12rpx;
    margin-right: 15rpx;
    color: #303133;
    font-size: 26rpx;
    letter-spacing: 1px;
}

.msg-service > .msg-wrap > .msg-text > .msg-text-content {
    color: #303133;
    margin-left: 15rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    margin-right: 70rpx;
}

.operation {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    align-items: center;
    background: #ffffff;
    padding: 10px 35rpx;
    border-top: 1rpx solid rgba(184, 184, 184, 0.1);
    width: 100vw;
}

.conversion {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.shop_block {
    height: 60rpx;
    width: 60rpx;
    // background: red;
    // background-image: url(../../img/icon04.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    margin-right: 10rpx;
}

.shop_img {
    height: 56rpx;
    width: 56rpx;
}

.send_btn {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 32rpx;
    color: #909399;
}

.msg-input3 {
    height: 60rpx;
    // width: 434rpx;
    width: 480rpx;
    // border-radius: 39rpx;
    margin-right: 16rpx;
    padding: 0 20rpx;
    background-color: #f7f7f7;
    border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.msg-input1 {
    background: #ffffff;
    height: 80rpx;
    width: 520rpx;
    border-radius: 20rpx;
    padding: 0 20rpx;
    border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.msg-input2 {
    display: flex;
    align-items: center;
    width: 140rpx;
    margin-left: 30rpx;
    height: 40px;
    background-color: #007aff;
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    border-radius: 10px;
    /*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
    color: rgba(0, 0, 0, 0);
}

.new_class {
    background: #ff7272 !important;
}
.new_color {
    color: #ffffff !important;
}
</style>
